<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>课程信息</title>
		<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<style type="text/css">
			#layui-layer-iframe1{
				height: 400px ! important ;
			}
		</style>
	</head>
	<body>
		<div class="layui-col-xs12" style="height: 200px;background-image: url(../static/course.jpg);">
			<div style="margin-top: 2%;margin-left: 4.16666%">
				<i style="font-size: 30px;color: white;" onclick="window.history.back();" class="layui-icon layui-icon-return"></i>
			</div>
			<div class="layui-col-xs5 layui-col-xs-offset1">
				<!-- 课程详情 -->
				<div class="layui-col-xs12" style="margin-top: 40px;color: white;">
					<div>
						<b><span th:text="${course.name}" style="font-size: 20px;"></span></b>
					</div>
					<div style="font-size: 20px;">
						<b><span>课程ID：</span>
						<span th:text="${course.id}"></span></b>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs12">
			<div class="layui-col-xs10 layui-col-xs-offset1">
				<div style="height: 100px;" >
					<div class="layui-tab layui-tab-brief">
					  <ul class="layui-tab-title">
					    <li class="layui-this">课程详情</li>
					    <li>班级人员</li>
					  </ul>
					  <div class="layui-tab-content">
					    <div class="layui-tab-item layui-show">
					    	<div th:text="${course.description}" style="height: 100px;"></div>
					    </div>
					    <div class="layui-tab-item">
					    	<div th:if="not ${#lists.isEmpty(students)}">
								<a class="layui-col-xs1" href="javascript:;" th:onclick="student([[${student.username}]])" th:each="student : ${students}" th:text="${student.name}">
							    </a>
							</div>
							<div th:if="${#lists.isEmpty(students)}">
								暂无学生加入
							</div>
							<i onclick="window.location.reload()" class="layui-icon layui-icon-refresh-3"></i>
					    </div>
					  </div>
					</div>
				</div>
			</div>
		</div>	
	</body>
	<script type="text/javascript">
		layui.use('element', function(){
			var elemnet = layui.element;
		})
		var id = [[${course.id}]]
		function student(username){
			layui.use('layer', function(){
				var layer = layui.layer;
				var info = layer.open({
				      type: 2,
				      title: '学生信息',
				      shadeClose: true,
				      shade: false,
				      offset: 't', 
				      btn: ['移除学生'],
				      yes: function(){
				    	  var temp = layer.alert("真的移除吗？", function(){
							  $.getJSON('../course/removeStudent', {
								  username: username,
								  id: id
							  }, function(res){
								  if(res.code == '00000'){
									  layer.msg('删除成功')
								  }else{
									  layer.alert(res.message)
								  }
				    		  	  window.location.reload();
							  })				    		  
				    	  })
				      },
				      maxmin: true, //开启最大化最小化按钮
				      area: ['600px', '400px'],
				      content: '../student/info?username='+username
				}); 
			})
		}
	</script>
</html>